import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input } from 'antd';

const StudentManagement = () => {
    const [students, setStudents] = useState([]);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [editingStudent, setEditingStudent] = useState(null);
    const [form] = Form.useForm();
    const [index, setIndex] = useState(2);

    useEffect(() => {
        setStudents([{
            id: 1,
            name: '张三',
            age: 20,
        },
        {
            id: 2,
            name: '李四',
            age: 22,
        }
        ])
    }, []);

    const showModal = (student) => {
        form.setFieldsValue(student);
        setEditingStudent(student);
        setIsModalVisible(true);
    };

    const handleOk = (values) => {
        if (editingStudent) {
            setStudents((prev) =>
                prev.map((student) => (student.id === editingStudent.id ? { ...student, ...values } : student))
            );
        } else {
            setStudents((prev) => [...prev, { ...values, id: index + 1 }]);
            setIndex(index + 1);
        }
        setIsModalVisible(false);
        setEditingStudent(null);
        form.resetFields();
    };
    const handleCancel = () => {
        setIsModalVisible(false);
        setEditingStudent(null);
        form.resetFields();
    }

    const handleDelete = (id) => {
        setStudents((prev) => prev.filter((student) => student.id !== id));
    };

    const columns = [
        {
            title: '学号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <>
                    <Button onClick={() => showModal(record)}>编辑</Button>
                    <Button onClick={() => handleDelete(record.id)} danger>删除</Button>
                </>
            ),
        },
    ];

    return (
        <div>
            <Button type="primary" onClick={() => showModal(null)}>新增学生</Button>
            <Table columns={columns} dataSource={students} rowKey="id" />
            <Modal
                title={editingStudent ? "编辑学生" : "新增学生"}
                open={isModalVisible}
                onCancel={handleCancel}
                footer={[
                    <Button key="back" onClick={handleCancel}>取消</Button>,
                    <Button key='submit' type="primary" onClick={() => form.submit()}>确定</Button>,
                ]}
            >
                <Form
                    form={form}
                    onFinish={handleOk}
                >
                    <Form.Item
                        name="name"
                        label="姓名"
                        rules={[{ required: true, message: '请输入姓名!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="age"
                        label="年龄"
                        rules={[{ required: true, message: '请输入年龄!' }]}
                    >
                        <Input type="number" />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default StudentManagement;
